<template>
  <div id="DefaultManual">
    <div class="header">
      <div id="part1">
        <div id="user">
          <span id="userIcon"><el-avatar :size="100" :src="circleUrl"></el-avatar></span>
          <span id="wellcome">欢迎 {{ username }} <span
              style="font-size: 18px;color: #acacac">您已登录{{ continueDays }}天</span></span>
        </div>
        <div id="wheatherDate">
          <div id="weatherIcon"></div>
          <div id="wheatherDateInfo">
            <span>{{ nowDay }}</span>
            <span><span style="font-size:30px;font-weight: bold">26º</span> 雷阵雨转中雨</span>
          </div>
          <span style="width: 168px; font-size: 25px;">{{ nowTime }}</span>
        </div>
      </div>
      <div id="part2">
        <router-link to="/system/ProClaim" style="text-decoration: none">
          <div @click="open(5);setActiveByNum(5)">通知公告</div>
        </router-link>
        <ul>
          <li v-for="item in infolists">
            <span class="info">{{ item.info }}</span>
            <span class="date">{{ item.date }} >></span>
          </li>
        </ul>
      </div>
    </div>
    <div class="bottom">
      <section class="chart-container">
        <el-row>
          <el-col :span="12">
            <div id="chartPie" style="width:500px; height:300px;margin-top: -30px"></div>
          </el-col>
        </el-row>
      </section>
      <div id="manu">
        <div id="manuButtonDiv">
          <el-button class="manuButton" autofocus="autofocus" @click="changeLineData(bookBorrowData)">月图书借阅量</el-button>
          <el-button class="manuButton" @click="changeLineData(magazineBorrowData)">月期刊借阅量</el-button>
          <el-button class="manuButton" @click="changeLineData(returnData)">图书归还率</el-button>
          <el-button class="manuButton" @click="changeLineData(newBookIncrease)">馆藏书增长率</el-button>
        </div>
        <div id="chartLine"></div>
      </div>
    </div>
  </div>
</template>

<script>
import {mapState,mapMutations} from "vuex";

export default {
  name: "DefaultManual",
  data() {
    return {
      continueDays: 20,
      nowDay: "",
      nowTime: "",
      chartPie: null,
      circleUrl: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
      infolists: [{
        info: this.$store.state.prolist[0].title,
        date: this.$store.state.prolist[0].date
      }, {
        info: this.$store.state.prolist[1].title,
        date: this.$store.state.prolist[1].date
      }, {
        info: this.$store.state.prolist[2].title,
        date: this.$store.state.prolist[2].date
      }, {
        info: this.$store.state.prolist[3].title,
        date: this.$store.state.prolist[3].date
      }],
      LineData: [],
      bookBorrowData: [6000, 9320, 9010, 9340, 8290, 10210, 11200, 8720, 7823, 11220, 9540, 7031],
      magazineBorrowData: [5336, 7821, 8310, 9340, 10290, 9215, 13200, 9130, 7895, 6502, 7301, 6908],
      returnData: [7050, 17260, 17330, 18202, 19680, 18930, 20520, 9301, 18020, 20129, 15060, 23420],
      newBookIncrease: [102, 330, 565, 830, 1502, 281, 1120, 430, 230, 303, 228, 123],
    }
  },
  methods: {
    ...mapMutations(['open', 'setActiveByNum']),
    displayTime() {
      //获取系统当前的年、月、日、小时、分钟、毫秒
      let date = new Date();
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      let day = date.getDate();
      let hour = date.getHours();
      let minutes = date.getMinutes();
      let second = date.getSeconds();
      this.nowDay = year + "年" + month + "月" + day + "日";
      this.nowTime = this.check(hour) + ":" + this.check(minutes) + ":" + this.check(second);
    },
    check(val) {
      if (val < 10) {
        return ("0" + val);
      } else {
        return (val);
      }
    },
    drawPieChart() {
      this.chartPie = this.$echarts.init(document.getElementById('chartPie'));
      this.chartPie.setOption({
        title: {
          text: '图书统计',
          /*subtext: '纯属虚构',*/
          textAlign: 'left',
          textStyle: {
            fontWeight: 'normal'
          }
        },
        tooltip: {
          trigger: 'item',
          formatter: "{a} <br/>{b} : {c} ({d}%)",
        },
        legend: {
          orient: 'vertical',
          left: 'right',
          top: '120',
          data: ['文学类', '学术类', '教辅类', '期刊类', '其他']
        },
        series: [
          {
            name: '在馆数',
            type: 'pie',
            radius: '70%',
            center: ['45%', '45%'],
            data: [
              {value: 5000, name: '文学类'},
              {value: 2100, name: '学术类'},
              {value: 2340, name: '教辅类'},
              {value: 1350, name: '期刊类'},
              {value: 1000, name: '其他'}
            ],
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      });
    },
    drawDiffLineChart() {
      this.chartLine = this.$echarts.init(document.getElementById('chartLine'));
      this.chartLine.setOption({
        xAxis: {
          type: 'category',
          data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
        },
        yAxis: {
          type: 'value'
        },
        grid: {
          left: 80
        },
        series: [{
          data: this.LineData,
          type: 'line',
          smooth: true
        }]
      })
    },
    changeLineData(data) {
      this.LineData = data;
      this.drawDiffLineChart();
    }
  },
  computed: {
    ...mapState(['username'])
  },
  mounted() {
    setInterval(this.displayTime, 1000);
    this.drawPieChart();
    this.changeLineData(this.bookBorrowData);
  },
  created() {
    console.log(this.$store.state.prolist)
  }
  /*    beforeDestroy() {
        clearInterval(this.nowTime);
        clearInterval(this.nowDay);
      }*/
}
</script>

<style scoped>
#DefaultManual {
  width: 100%;
  height: 100%;
  background: #fbf9f9;
}

.header {
  width: 100%;
  height: 253px;
  display: flex;
  flex-direction: row;
}

#part1 {
  width: 40%;
  min-width: 435px;
  text-align: center;
  border-right: 1px solid #d8d8d8;
}

#user {
  width: 100%;
  height: 126px;
  display: flex;
  text-align: center;
  background-color: #fbf9f9;
}

#userIcon {
  width: 30%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

#userIcon:hover {
  transition: all 0.1s ease-out;
  transform: scale(1.1);
}

#wellcome {
  width: 70%;
  height: 100%;
  line-height: 126px;
  font-size: 30px;
}

#weatherIcon {
  width: 50px;
  height: 50px;
  margin: 0 30px;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url("../../assets/images/rain.png");
  background-size: 100%;
}

#wheatherDate {
  height: 126px;
  color: #4e4e4e;
  border-bottom: 1px solid #d8d8d8;
  background-color: #fbf9f9;
  display: flex;
  align-items: center;
}

#wheatherDateInfo {
  width: 250px;
  height: 100%;
  display: flex;
  flex-direction: column;
}

#wheatherDateInfo span:nth-child(1) {
  width: 100%;
  height: 60px;
  line-height: 60px;
  font-size: 25px;
}

#wheatherDateInfo span:nth-child(2) {
  width: 100%;
  height: 66px;
  line-height: 66px;
}

#wheatherDateInfo span:nth-child(2) h1 {
  margin: 0;
}

#part2 {
  width: 60%;
  text-align: center;
  border-bottom: 1px solid #d8d8d8;
}

#part2 div {
  height: 8%;
  color: #4e4e4e;
  border: 1px solid #d8d8d8;
  background-color: #f0f0f0;
}

#part2 div:hover {
  cursor: pointer;
  color: #409EFF;
  background: #ecf5ff;
  transition: all 0.1s ease-in;
}

#part2 ul {
  width: 100%;
  height: 92%;
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
}

#part2 ul li {
  width: 100%;
  flex-grow: 1;
  display: flex;
  align-items: center;
  color: black;
  border-top: 1px solid #d8d8d8;
}

#part2 ul li:hover {
  cursor: pointer;
  color: #409EFF;
  background: #ecf5ff;
  transition: all 0.1s ease-in;
}

.info {
  width: 79%;
  margin-left: 1%;
  font-size: 14px;
  text-align: left;
}

.date {
  width: 19%;
  font-size: 12px;
  margin-right: 1%;
  text-align: right;
}

.chart-container {
  width: 50%;
  height: 100%;
}

.el-col {
  padding: 30px 20px;
}

.bottom {
  width: 100%;
  height: 300px;
  margin-top: 3%;
  display: flex;
  flex-direction: row;
}

#manu {
  width: 50%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

#manuButtonDiv {
  width: 100%;
  height: 30px;
  display: flex;
}

.manuButton {
  width: 157px;
  height: 30px;
  line-height: 30px;
  padding: 0;
  border: none;
  border-radius: 0;
  margin: 0 !important;
  flex-grow: 1;
}

.el-button {
  background: transparent;
}

.el-button:focus {
  color: white;
  background: #438aff;
  transition: all 0.1s ease-in;
}

#chartLine {
  width: 100%;
  height: 500px;
}
</style>
